﻿@page "/tree-grid/column-formatting"

@using Syncfusion.Blazor.TreeGrid
@using Syncfusion.Blazor.Grids

@*Hidden:Lines*@
@using ej2_blazor_formatdata
@inherits SampleBaseComponent;
@*End:Hidden*@

<SampleDescription>
  <p>This sample demonstrates the way of displaying the content of TreeGrid columns based on the specified format.</p>  
</SampleDescription>
<ActionDescription>
   <p>Format is the process of customizing the particular column data/values based on specific culture. The TreeGrid uses Internationalization library to format number and date values. The format can be specified by using the <code> Format</code> property of columns.</p>
   <p>In this demo, select the column and format from the property panel to format the corresponding column values.</p>
</ActionDescription>


<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
            <SfTreeGrid Height="371" DataSource="@TreeData" IdMapping="OrderID" ParentIdMapping="ParentID" TreeColumnIndex="1">
                <TreeGridColumns>
                    <TreeGridColumn Field="OrderID" HeaderText="Order ID" Width="100" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="OrderName" HeaderText="Order Name" Width="150"></TreeGridColumn>
                    <TreeGridColumn Field="OrderDate" HeaderText="Order Date" Format="d" Type=ColumnType.Date Width="170" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="Price" HeaderText="Price" Width="120" Format="C2" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="UnitPrice" HeaderText="Unit Price" Width="100" Format="C2" TextAlign="TextAlign.Right"></TreeGridColumn>
                </TreeGridColumns>
            </SfTreeGrid>
        </div>
    </div>
</div>

@code{

    public List<TreeDataFormat> TreeData { get; set; }

    protected override void OnInitialized()
    {
        this.TreeData = TreeDataFormat.GetDataFormat();
    }
}
